<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${category.title }</title>
<link rel="icon" href="<c:url value="/img/favicon.ico"/>"/>
<link media="all" href="<c:url value="/css/base.css"/>" type="text/css" rel="stylesheet"/>
<link media="all" href="<c:url value="/css/3c.pshow.css"/>" type="text/css" rel="stylesheet"/>
<script src="<c:url value="/js/jquery-1.2.6.js"/>" type="text/javascript"></script>


</head>

<body>
	<script src="<c:url value="/js/base-v1.js"/>" type="text/javascript"></script>
	<script src="<c:url value="/js/lib-v1.js"/>"  type="text/javascript"></script>
	<script type="text/javascript" src="<c:url value="/js/p.pshow.js"/>"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2。0&ak=dg41nNbkwpSISiYpqSCgG08P"></script>
	
 	<jsp:include page="/jsp/shortcut.jsp" />

	<jsp:include page="/jsp/header.jsp" />


	<!-- <div class="w">
		<div class="breadcrumb" itemprop="breadcrumb">
			<a rel="nofollow" href="http://en.jd.com/">JD</a> &nbsp;&gt;&nbsp;
			<a href="http://en.jd.com/computers-and-accessories.html">Electronics &amp; Computers </a> &nbsp;&gt;&nbsp;
			<a href="http://en.jd.com/products/7379-11331-0-0-0-0-0-0-0-0-0-0-0-0.html">Cell Phones &amp; Accessories    </a> &nbsp;&gt;&nbsp;
			<a href="http://en.jd.com/products/7379-11331-11454-0-0-0-0-0-0-0-0-0-0-0.html">Cell Phone        </a>
		</div>
	</div> -->

	 <div>
	 	<div class="w">
		    <div id="preview">
		        <div class="jqzoom" id="spec-n1">
					<img src="<c:url value="/image/getImage.action/${category.imageId[0] }"/>" width="350" height="350"/>
		        </div>
		        <div id="spec-n5">
					<div id="spec-list">
						<ul class="list-h">
							<c:forEach var="image" items="${category.imageId }">
								<li>
									<a href="#">
										<img src="<c:url value="/image/getImage.action/${image}"/>" alt="" width="50" height="50"/>
									</a>
								</li>
							</c:forEach>
		                </ul>
					</div>
		            <div id="spec-left" class="control"></div>
		            <div id="spec-right" class="control"></div>
		       </div>
		
		    </div>
		    <div class="fl" id="name">
				<div class="p-name">
					<span class="title">${category.title}</span>
				</div>
		        <ul id="skuid">
		            <li><strong>影像 ID:</strong><span>${category.itemId}</span></li>
		        </ul>
		        <ul style="" id="summary">
					<li>
						<dl>
							<dd>
							  <span class="">
							  	影像来源：${category.origin }
							  </span>
							</dd>
			               <dd>
							  <span class="">
							  	分辨率：${category.resolution }米
							  </span>
							</dd>
							<dd>
							  <span class="">
							  	影像面积：${category.proportion }平方千米
							  </span>
							</dd>
							<dd>
							  <span class="">
							  	经纬度：${category.longtitude } - ${category.latitude }
							  </span>
							</dd>
		            	</dl>
		            </li>
		            <li class="float-li">
		              <div style="float:left;">价格:</div>
		              <div class="d-price">
		                <span id="c-price" class="quantity">${category.price}元</span>
		              </div>
		              <!-- <iframe class="iframe-float" scrolling="no" frameborder="0"> </iframe> -->
		            </li>
		        </ul>
		        <div id="choose" class="m">
		                        <dl class="quantity1">
		               <dt>数量：</dt>
		                <dd><input id="pcount" type="text" value="1" size="1" /><span>&nbsp;&nbsp;件</span></dd>
		            </dl>
		            <div class="btn" id="addCart">
		                <a rel="nofollow" href="javascript:void(0)" onclick="addToCart(${category.itemId})"></a>
		            </div>         
		            <div class="clr"></div>
		        </div>
				<div id="confidence" class="m">
		              
		        </div>
		        
			</div>
			<div class="clr"></div>
		</div>
	       
		<div class="w">
		    <div class="about" id="about">
		        <div class="mt">
		            <ul class="tab">
		                <li id="about-1" class="curr">关于影像</li>
		            </ul>
		        </div>
		        <div class="mc">          
		            <div id="about-1con" style="display: block;" class ="c-intr">       
			            <div class="mtitle">地图信息：</div>
			            <div class="mcc">
			            	<p>
			            		<span style="font-size:16px;color:#ff0000;">
			            			<strong>下面展示的是遥感影像所拍摄的地区在地图上的位置。</strong>
			            		</span>
			            	</p>
			            	
			            	<div id="allmap" style="width: 868px;height: 535px;overflow: hidden;text-align:center;margin:0 auto;"></div>
							<script type="text/javascript">
								var longtitude = parseFloat("${category.longtitude}");
								var latitude = parseFloat("${category.latitude}");
								var map = new BMap.Map("allmap");
								var point = new BMap.Point(longtitude, latitude);
								map.centerAndZoom(point, 10);
								var myIcon = new BMap.Icon('<c:url value="/img/markers.png"/>', new BMap.Size(23,25), {
										offset: new BMap.Size(10, 25),
										imageOffset: new BMap.Size(0, 0 - 11 * 25)
									});
								var marker = new BMap.Marker(point, {icon: myIcon});  // 创建标注
								map.addOverlay(marker);               // 将标注添加到地图中
								map.enableScrollWheelZoom(true);
								map.addControl(new BMap.NavigationControl());
								map.addControl(new BMap.MapTypeControl());
								
								marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
							</script>
							<div class="clr"></div>
						</div>
		            </div>                     
		        </div>
		    </div>
		
			
		
		    <span class="clr"></span>
		</div>
	
		<jsp:include page="/jsp/bottom.jsp" />
	
	</div>

	<!-- <script type="text/javascript" src="../../js/buttons.js"></script> -->
	<script type="text/javascript">
		function addToCart(id){
			var username = "${sessionScope.USER_NAME}";
			if(username == null || username == ""){
				alert("请登录后进行添加购物车操作！")
				window.location.href = "/RemoteSensing/user/facade.action";
			}else{
				window.location.href = "/RemoteSensing/cart/addToCart.action?id=" + id + "&count=1";
			}
		}
	</script>
	<!-- <script type="text/javascript" src="http://misc.360buyimg.com/201007/js/ja6.js"></script> -->

</body>
</html>

